import '@/styles/common.scss'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import { useIntersectionObserver } from '@vueuse/core'

const app = createApp(App)

app.use(createPinia())
app.use(router)

app.mount('#app')

// 自定义的全局指令
app.directive('imgLazy', {
    // el: 指令绑定的那个元素 img
    // binding: binding.value  指令等于号后面绑定的表达式的值  图片url
    mounted(el, binding) {
        // 监听图片加载完成
        const {stop}=useIntersectionObserver(el,([{isIntersecting}])=>{
            if(isIntersecting){ // isIntersecting就是是否进入 可视区
                el.src=binding.value
                stop()//手动停止监听，避免浪费资源
            }
        })
    }
})
